<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { onMounted, reactive } from "vue";
import { fetchGetPersonAllNumber } from '@/api/screen/person'


const yData = reactive([0, 0, 0, 0, 0, 0, 0])
const max = 4
onMounted(() => {
  getPersonAllNumber()
})
const getPersonAllNumber = async () => {
  const res = await fetchGetPersonAllNumber()
  res.data.forEach((item: any) => {
    if (item.type == 1) {
      yData[0] += 1
    } else if (item.type == 2) {
      yData[1] += 1
    } else if (item.type == 3) {
      yData[2] += 1
    } else if (item.type == 4) {
      yData[3] += 1
    } else if (item.type == 5) {
      yData[4] += 1
    } else if (item.type == 6) {
      yData[5] += 1
    } else if (item.type == 7) {
      yData[6] += 1
    }
  })
}


const option = reactive({
  radar: {
    radius: '60%',
    center: ['50%', '52%'],
    startAngle: 0,
    triggerEvent: true,
    name: { textStyle: { color: '#fff', fontSize: '16', borderRadius: 3, padding: [20, 5] } },
    nameGap: '2',
    indicator: [
      { name: '学习型', max: max },
      { name: '艺术特长型', max: max },
      { name: '技能学术型', max: max },
      { name: '体育运动型', max: max },
      { name: '公益性', max: max },
      { name: '娱乐休闲型', max: max },
      { name: '创业型', max: max },
    ],
    splitArea: {
      areaStyle: {
        color: ['rgba(0,255,255, 0.1)', 'rgba(0,255,255, 0.2)', 'rgba(0,255,255, 0.3)', 'rgba(0,255,255, 0.4)', 'rgba(0,255,255, 0.5)', 'rgba(0,255,255, 0.6)',].reverse(),
        shadowColor: 'rgba(0, 0, 0, 1)',
        shadowBlur: 30,
        shadowOffsetX: 10,
        shadowOffsetY: 10
      }
    },
    axisLine: { lineStyle: { color: 'rgba(0,206,209, 0.3)' } },
    splitLine: {
      lineStyle: {
        width: 1,
        color: ['rgba(0,206,209, 0.1)', 'rgba(0,206,209, 0.2)', 'rgba(0,206,209, 0.3)', 'rgba(0,206,209, 0.4)', 'rgba(0,206,209, 0.5)', 'rgba(0,206,209, 0.6)'].reverse()
      }
    }
  },
  series: [
    {
      name: '2020评分',
      type: 'radar',
      areaStyle: { color: 'rgba(255,237,145, 0.5)' },
      symbol: 'circle',
      symbolSize: 12,
      itemStyle: { color: 'rgba(255,237,145,0.8)', borderColor: 'rgba(255,237,145,0.2)', borderWidth: 10, },
      lineStyle: { color: 'rgba(255,237,145, 0.6)', width: 2 },
      data: [yData]
    }
  ]
});
</script>

<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
